<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./../css/bijiao.css">
    
<style>
*{margin: 0;padding: 0;}
        /* #ulbox{
            width: 300px;
            display: none;
        }
        #ulbox li{
            list-style: none;
        }
        #ulbox li h4{
            font: 20px/30px "";
            border: 1px solid #666;
            background: #ccc;
        }
        #ulbox li div{
            background: #fff;
            overflow: hidden;
            margin-bottom: 3px;
        }
        #ulbox li div p{
            border: 1px solid #999;
            float: left;
            width: 100px;
            box-sizing: border-box;
            text-align: center;
            font: 12px/24px "";
        } */
</style>
</head>
<body>
    <header id="header">
        <div class="fl logo">
            <a href="">
                <img src="./../assets/images/header_logo.png" alt="">
            </a>
        </div>
        <div class="app fr">
            <a href="">
                <img src="./../assets/images/header_app.png" alt="">
            </a>
        </div>
    </header>
    <!--搜索-->
    <section id="search">
<div class="searchbox">
    <input type="text" name placeholder="请输入你想比价的产品">
</div>
<div class="button">
    <button>
        搜索
    </button>
</div>
    </section>
    <ul id="ulbox">
        <li>

        </li>
    </ul> 
    <section id="footer">
        <div class="more">
            <a href="">更多优惠信息</a>
        </div>
        <div class="chart">
            <span class="chart_in fl">品牌排行</span>
            <span class="more fr">
                <img src="./../assets/images/more.png" alt="">
            </span>
        </div>
        <div class="login">
            <div class="container">
                <div class="ro">
                    <a href="">
                        <div class="col-xs-3">登入</div>
                    </a>
                    <a href="">
                        <div class="col-xs-4">注册</div>
                    </a>
                    <a href="">
                        <div class="col-xs-5">返回顶部</div>
                    </a>
                    <span></span>
                </div>
            </div>
        <div class="content_b">
            <p>
                <a href="#">
                    手机APP下载
                </a>
                <a href="#">
                    万锋智慧商城手机版
                </a>
                -- 掌上比价平台
            </p>
            <p>
                chst.vip:8081/crm </p>
        </div>
        </div>
            </section>
    <script src="./../js/jquery-3.6.0.min.js"></script>
<script>
      //获取 ul
      let oul = document.querySelector("#ulbox")
      let oli=document.querySelector("li")
        // 接收 标题的 titleId
        let titleArr = [];
        // 接收 每一个div中的内容
        let contentArr = [];
        
        // 发送请求 一级 标题    同步
        const xhr1 = new XMLHttpRequest();
        xhr1.open("get","http://chst.vip:1234/api/getcategorytitle",false);
        xhr1.onreadystatechange = function(){
            if(xhr1.readyState === 4){
                if(xhr1.status === 200){
                    let res1 = JSON.parse(xhr1.response);
                    let ele = "";
                    res1.result.forEach(item=>{
                        // 把每个 titleId 存起来
                        titleArr.push(item.titleId);
                        // 拼接 每一个 一级标题的 结构
                        ele += `<li>
                                    <h4>${item.title}</h4>
                                    <div></div>
                                </li>`
                    });
                    // 写入到 ul中
                    oul.innerHTML = ele;
                }
            }
        }
        xhr1.send(null)

    //     // 发送 二级内容的 请求   同步      value是每个 titleId
        titleArr.forEach(value=>{
            const xhr2 = new XMLHttpRequest();
            xhr2.open("get","http://chst.vip:1234/api/getcategory?titleid="+value,false);
            xhr2.onreadystatechange = function(){
                if(xhr2.readyState === 4){
                    if(xhr2.status === 200){
                        let res2 = JSON.parse(xhr2.response);
                        // console.log(res2);
                        let divContent = ""
                        res2.result.forEach(item => {
                            divContent +=`<P categoryid=${item.categoryid} category=${item.category}>${item.category}</P>`          
                        });
                        // 把 每个 div中内容 添加到 数组中
                        contentArr.push(divContent);
                        // 清空 为下次 拼接 内容准备
                        divContent = ""
                    }
                }
            }
            xhr2.send(null)
        })
        
    //     // 获取到 每个 div 给 div中 写入 存在数组中的 内容
        let aDiv = document.querySelectorAll("#ulbox li div")
        aDiv.forEach((item,index)=>{
            // console.log(item)
            // console.log(contentArr[index])
            item.innerHTML = contentArr[index];
        });
        $("#ulbox").find("div").slideUp(0,function(){
            $("#ulbox").css("display","block");
        });
        $("#ulbox li").click(function(){
            
            
            $(this).find("div").slideDown().parent().siblings().find("div").slideUp();
        })
        let a = $(this).attr('categoryid')
        </script>
</body>
</html>